<template>
  <view class="item-container" :class="{mg8}" @click="handleClick">
    <!-- 左侧图标 -->
    <view class="left-icon">
	  <view v-if="leftIcon" class="iconfont" :class="leftIcon"></view>
      <text 
        v-else-if="leftText" 
        class="icon-text"
      >{{ leftText }}</text>
    </view>

    <!-- 中间内容 -->
    <view class="content">
      <text class="title">{{ title }}</text>
      <text v-if="subtitle" class="subtitle">{{ subtitle }}</text>
    </view>

    <!-- 右侧图标 -->
    <view class="right-icon">
      <text v-if="rightText"  class="icon-text" >{{ rightText }}</text>
	  <view v-if="rightIcon" class="iconfont" :class="rightIcon"></view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    // 左侧图标或文字
    leftIcon: String,
    leftText: String,
    
    // 中间内容
    title: {
      type: String,
      required: true
    },
    subtitle: String,
    
    // 右侧图标或文字
    rightIcon: String,
    rightText: String,
	
	mg8: Boolean,//下边距
  },
  methods: {
    handleClick() {
      this.$emit('click')
    }
  }
}
</script>

<style scoped lang="scss">
.item-container {
  display: flex;
  align-items: center;
  height: 104rpx;
  padding: 0 46rpx;
  background-color: #fff;
  border-bottom: 2rpx solid #F8F8F8;
  color: #2D2D2D;
  font-size: 32rpx;
  &.mg8{
	  margin-bottom: 8rpx;
  }
  
  .left-icon, .right-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40rpx;
    
    .icon {
      width: 36rpx;
      height: 36rpx;
    }
  }
  .left-icon{
	  text-align: center;
	  line-height: 47rpx;
	  .iconfont{
	  	width: 47rpx;
	  	height: 47rpx;
		font-size: 38rpx;
		overflow: hidden;
	  }
  }
  
  .content {
    flex: 1;
    padding: 0 20rpx;
    overflow: hidden;
    
    .title {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    
    .subtitle {
      display: block;
      margin-top: 5rpx;
    }
  }
  
  
  .right-icon{
	  width: auto;
		.iconfont{
			color: #B6B6B6;
			font-size: 24rpx;
			font-weight: bold;
			transform: translateY(0) rotate(180deg);
		}
		.icon-text{
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			margin-right: 16rpx;
			font-size: 24rpx;
			color: #455F82;
		}
  	}
}
</style>